<template>
  <div class="search">
    <div class="search-input">
      <el-input
        placeholder="搜索标题"
        v-model="input3"
        class="input-with-select"
        @keyup.enter.native="search"
      >
        <el-button
          @click="search"
          class="button"
          slot="append"
          icon="el-icon-search"
        ></el-button>
      </el-input>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input3: "",
      select: "",
    };
  },
  watch: {
    input3(n, o) {
      this.changeTitle(n);
    },
  },
  methods: {
    changeTitle(val) {
      this.$emit("changeTitle", val);
    },
    search() {
      this.$emit("search");
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  text-align: center;
  height: 120px;
  // background: linear-gradient(
  //   98deg,
  //   #002375 0%,
  //   rgba(0, 35, 117, 0.92) 5%,
  //   #002375 25%,
  //   rgba(0, 35, 117, 0.88) 49%,
  //   #002375 82%,
  //   rgba(0, 35, 117, 0.89) 100%
  // );
  background: url("../assets/img/dev_bg.png");
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  // background-attachment: fixed; //此条属性必须设置否则可能无效/
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;
  /* 设置背景颜色，背景图加载过程中会显示背景色 */
  // background-color: #cccccc;
  .search-input {
    width: 676px;
    margin: 0 auto;
    padding-top: 40px;
    .button {
      color: #ffffff;
      background: #3f94ff;
    }
  }
}
</style>